/**
 * @author BoLiang
 */
if (typeof accedo === "undefined") {
	accedo = {};
}
if (typeof accedo.achievement === "undefined") {
	accedo.achievement = {};
}

accedo.achievement.scoreShow = {

	divCurrID : 0,
	divLength : 0, // total number of div
	divManNode : null,
	divTitNode : null,
	divCtnNode : null,
	divInnNode : null,
	divScrNode : null,
	divBarNode : null,
	moveCount : 0,
	oldOnkeydownFunc : null,

	init : function() {
		this.divCurrID = 0;
		this.divLength = 0;
		this.divManNode = null;
		this.divTitNode = null;
		this.divCtnNode = null;
		this.divInnNode = null;
		this.divScrNode = null;
		this.divBarNode = null;
		this.moveCount = 0;
		this.oldOnkeydownFunc = null;
	},

	appendAchiPage : function() {
		this.init();
		this.initInnerDiv();
		this.oldOnkeydownFunc = document.onkeydown;
		document.onkeydown = function(e) {
			accedo.achievement.scoreShow.keysControl(e);
		};
	},
	removeAchiPage : function() {
		dwr.engine.setPreHook();
		dwr.engine.setPostHook();
		var bodyNode = document.getElementsByTagName("body")[0];
		bodyNode.removeChild(this.divManNode);
		document.onkeydown = this.oldOnkeydownFunc;
	},
	
	preHook : function() {	
		var divContLoading = document.createElement("div");
		divContLoading.innerHTML = "<img style='margin-left: 500px; margin-top:280px' width='280px' height='25px' src='http://127.0.0.1:8080/AchiPlugin/scorePlugin/score-images/scoreLoading.gif' />";
		var divTitLoading = document.createElement("div");
		divTitLoading.id = "divScoreShowTitle";
		var divManLoading = document.createElement("div");
		divManLoading.id = "divScoreShowLoading";
		
		divManLoading.appendChild(divTitLoading);
		divManLoading.appendChild(divContLoading);
		var bodyNode = document.getElementsByTagName("body")[0];
		bodyNode.appendChild(divManLoading);
	},
	
	postHook : function() {
		var divNode = document.getElementById("divScoreShowLoading"); 
		var bodyNode = document.getElementsByTagName("body")[0];
		bodyNode.removeChild(divNode); 
	},

	initInnerDiv : function() {
		dwr.engine.setPreHook(this.preHook); 
		dwr.engine.setPostHook(this.postHook); 
		UserService._path = 'http://127.0.0.1:8080/AchiPlugin/dwr';
		UserService.getAllJsonUsersScore(this.initInnerDivCallback);
	},
	
	initInnerDivCallback : function(data) {
		var serverDataObj = eval("(" + data + ")");
		var ctnDiv = accedo.achievement.scoreShow
				.createCtnDiv(serverDataObj);
		var tilDiv = accedo.achievement.scoreShow.createTitDiv();
		var manDiv = accedo.achievement.scoreShow.createManDiv(
				tilDiv, ctnDiv);

		var bodyNode = document.getElementsByTagName("body")[0];
		bodyNode.appendChild(manDiv);

		accedo.achievement.scoreShow.divCurrID = 0;
		var divNode = document
				.getElementById(accedo.achievement.scoreShow.divCurrID);
		divNode.style.borderColor = "white";
		divNode.style.backgroundColor = "#0033FF";
	},
	
	createManDiv : function(tilNode, ctnNode) {
		this.divManNode = document.createElement("div");
		this.divManNode.id = "divScoreShowMain";
		this.divManNode.appendChild(tilNode);
		this.divManNode.appendChild(ctnNode);
		return this.divManNode;
	},
	createTitDiv : function() {
		this.divTitNode = document.createElement("div");
		this.divTitNode.id = "divScoreShowTitle";
		return this.divTitNode;
	},
	createCtnDiv : function(serverDataObj) {
		this.divLength = serverDataObj.users.length;
//		this.divLength = 11;
		this.divInnNode = document.createElement("div");
		this.divInnNode.id = "divScoreShowInner";
		this.divInnNode.style.height = (105 * this.divLength) + "px";
		var topInterval = 0;

		// create all of the DIV and append them into div container
		for ( var divNum = 0; divNum < this.divLength; divNum++) {
			topInterval = topInterval + 5;
			var divNode = document.createElement("div");
			divNode.id = divNum;
			divNode.className = "divScoreShowCell";
			divNode.style.top = topInterval + "px";

			var divStarNode = document.createElement("div");
			divStarNode.id = "divLogo";
			divStarNode.innerHTML = "<img src='http://127.0.0.1:8080/AchiPlugin/scorePlugin/score-images/scoreStar.png' /><input type='hidden' id=hidden"
					+ divNum
					+ " value='aa' />";
			divNode.appendChild(divStarNode);

			var divContNode = document.createElement("div");
			divContNode.id = "divScoreName";
			divContNode.innerHTML = "<font color='white'>" + serverDataObj.users[divNum].username + "</font>";
			divNode.appendChild(divContNode);

			var divTickNode = document.createElement("div");
			divTickNode.id = "divScoreNum";
			divTickNode.innerHTML = "<font color='white'>" + serverDataObj.users[divNum].score + "</font>";

			
			divNode.appendChild(divTickNode);
			

			this.divInnNode.appendChild(divNode);

		}
		// *********************************************
		this.divScrNode = document.createElement("div");
		this.divScrNode.id = "divScoreShowScroll";
		this.divBarNode = document.createElement("div");
		this.divBarNode.id = "divScoreShowScrollBar";
		this.divBarNode.innerHTML = "<img width=100% height=100% src='http://127.0.0.1:8080/AchiPlugin/scorePlugin/score-images/scoreBarFront.png' />";
		this.divBarNode.style.height = ((420 / this.divLength) * 4) + "px";
		this.divScrNode.appendChild(this.divBarNode);

		// *********************************************
		this.divCtnNode = document.createElement("div");
		this.divCtnNode.id = "divScoreShowContainer";

		this.divCtnNode.appendChild(this.divScrNode);
		this.divCtnNode.appendChild(this.divInnNode);

		return this.divCtnNode;
	},

	moveCurrDiv : function(direction) {
		var divOldNode = document.getElementById(this.divCurrID);
		// alert(this.divLength);
		if (direction == "down" && this.divCurrID < this.divLength - 1) {
			// alert("sldkfjkljklsd");
			this.divCurrID = this.divCurrID + 1;
			var divNewNode = document.getElementById(this.divCurrID);
			divOldNode.style.borderColor = "#333333";
			divOldNode.style.backgroundColor = null;

			divNewNode.style.borderColor = "white";
			divNewNode.style.backgroundColor = "#0033FF";

			if (this.moveCount == 3) {
				var topValue = this.divInnNode.offsetTop - 105;
				this.divInnNode.style.top = topValue + "px";

				if (this.divCurrID == this.divLength - 1) {
					var topBarValue = 420 - ((420 / this.divLength) * 4);
					this.divBarNode.style.top = topBarValue + "px";
				} else {
					var topBarValue = this.divBarNode.offsetTop
							+ (420 / this.divLength);
					this.divBarNode.style.top = topBarValue + "px";
				}

			} else {
				this.moveCount++;
			}

		} else if (direction == "up" && this.divCurrID > 0) {
			this.divCurrID = this.divCurrID - 1;
			var divNewNode = document.getElementById(this.divCurrID);
			divOldNode.style.borderColor = "#333333";
			divOldNode.style.backgroundColor = null;
			divNewNode.style.borderColor = "white";
			divNewNode.style.backgroundColor = "#0033FF";

			if (this.moveCount == 0) {
				var topValue = this.divInnNode.offsetTop + 105;
				this.divInnNode.style.top = topValue + "px";

				if (this.divCurrID == 0) {
					this.divBarNode.style.top = "0px";
				} else {
					var topBarValue = this.divBarNode.offsetTop
							- (420 / this.divLength);
					this.divBarNode.style.top = topBarValue + "px";
				}
			} else {
				this.moveCount--;
			}
		}
	},
	keysControl : function(e) {
		e = window.event || e;
		switch (e.keyCode) {
		// up button
		case 38:
			this.moveCurrDiv("up");
			break;
		// down button
		case 40:
			this.moveCurrDiv("down");
			break;

		// enter button
		case 13:
			var hiddenInputNode = document.getElementById("hidden"
					+ this.divCurrID);
			var achiSnValue = hiddenInputNode.getAttribute("value");
			accedo.achievement.achiContShow.openPage(achiSnValue);
			break;
		// esc button
		case 27:
			this.removeAchiPage();
			break;
		default:
			break;
		}
	}
};